<template>
  <lay-table :key="tableKey" :resize="true" :columns="columns" :loading="loading" :data-source="dataSource"
    :span-method="spanMethod" :default-toolbar="['export']" style="height: 100%;">
    <template v-slot:toolbar>
      <!-- 数据筛选 -->
      <lay-form :model="queryForm" isLabelTooltip>
        <lay-form-item prop="city" mode="inline" size="xs" style="margin-bottom: 0;">
          <lay-select v-model="queryForm.city" multiple showSearch allow-clear minCollapsedNum=1 placeholder="市"
            size="xs">
            <lay-select-option v-for="city in selectList.cityList" :key="city" :value="city"
              :label="city"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item prop="county" mode="inline" size="xs" style="margin-bottom: 0;">
          <lay-select v-model="queryForm.county" multiple showSearch allow-clear minCollapsedNum=1 placeholder="区/县"
            size="xs">
            <lay-select-option v-for="county in selectList.countyList" :key="county" :value="county"
              :label="county"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item prop="town" mode="inline" size="xs" style="margin-bottom: 0;">
          <lay-select v-model="queryForm.town" multiple showSearch allow-clear minCollapsedNum=1 placeholder="乡/镇"
            size="xs">
            <lay-select-option v-for="town in selectList.townList" :key="town" :value="town"
              :label="town"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <!-- <lay-form-item prop="town" mode="inline" size="xs" style="margin-bottom: 0;">
          <lay-select v-model="queryForm.forestClass" multiple showSearch allow-clear minCollapsedNum=1
            placeholder="森林类别" size="xs">
            <lay-select-option v-for="value in selectList.forestClassList" :key="value.id" :value="value"
              :label="value"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item prop="town" mode="inline" size="xs" style="margin-bottom: 0;">
          <lay-select v-model="queryForm.ecologicalZone" multiple showSearch allow-clear minCollapsedNum=1
            placeholder="生态分区" size="xs">
            <lay-select-option v-for="value in selectList.ecologicalZoneList" :key="value.id" :value="value"
              :label="value"></lay-select-option>
          </lay-select>
        </lay-form-item> -->
      </lay-form>
    </template>
  </lay-table>
</template>

<script setup>
import { ref, computed, watch, reactive, onMounted, h, compile } from 'vue';
import { layer } from '@layui/layui-vue';
import api from '@/api';

const loading = ref(true);
const tableKey = ref(0)

const queryForm = ref({
  pageNum: 1,
  pageSize: 20,
  province: ["广西"],
  city: [],
  county: [],
  town: [],
  village: [],
  forestClass: [],
  ecologicalZone: []
})

// 导出表格数据
// layui.table.exportFile('tableId', data, 'xlsx');

const dataSource = ref([]);
// const page = reactive({ current: 1, limit: 20, limits: [2, 100, 500], total: dataSource.value.length, layout: ["page", "limits", "prev", "refresh", "count", "next", "skip",] });
// // 分页、排序、筛选等参数
// const change = (page) => {
//   queryForm.value.pageNum = page.current;
//   queryForm.value.pageSize = page.limit;
//   loading.value = true;
//   initDataList();
// }
// page.change = change;

// 下拉选择列表
const selectList = ref([])
const getSelectList = async () => {
  await api.post('resource/select', queryForm.value).then((res) => {
    if (res.code == 200) {
      console.log('@resource/select res', res)
      selectList.value = res.data
      console.log('@selectList.value', selectList.value)
    } else {
      layer.msg(res.msg, { icon: 2, time: 5000 });
    }
  })
}

const columns = ref([
  // { title: "ID", key: "id", fixed: "left", align: 'center', width: '20px', hide: true },
  // { title: "序号", key: "index", fixed: "left", align: 'center', width: '20px' },
  // { title: "省", key: "province", align: 'center', hide: true, ellipsisTooltip: true },
  { title: "市", key: "city", align: 'center', ellipsisTooltip: true },
  { title: "区/县", key: "county", align: 'center', ellipsisTooltip: true },
  // { title: "乡/镇", key: "town", align: 'center', ellipsisTooltip: true },
  // { title: "植被生态区", key: "vegetation_ecological_zone", align: 'center', ellipsisTooltip: true },
  // { title: "生态工程区", key: "ecological_engineering_zone", align: 'center', ellipsisTooltip: true },
  { title: "生态分区", key: "ecological_zone_2", align: 'center' },
  { title: "森林类别", key: "forest_class", align: 'center' },
  // { title: "事权级", key: "forest_level", align: 'center' },
  { title: "起源", key: "origin", align: 'center' },
  { title: "优势树种", key: "dominant_tree_species", align: 'center', ellipsisTooltip: true, },
  {
    title: "年龄组", align: 'center',
    children: [
      { title: "幼龄林", key: "ag_1_count", align: 'center' },
      { title: "中龄林", key: "ag_2_count", align: 'center' },
      { title: "近熟林", key: "ag_3_count", align: 'center' },
      { title: "成熟林", key: "ag_4_count", align: 'center' },
      { title: "过熟林", key: "ag_5_count", align: 'center' },
      { title: "总计", key: "total_count", align: 'center' },
    ]
  },
]);


// 获取数据列表
const initDataList = async () => {
  loading.value = true
  await api.post("resource/totals", queryForm.value).then((res) => {
    if (res.code === 200) {
      loading.value = false
      dataSource.value = res.data || []
      getSelectList()
      tableKey.value++ // 改变key值，强制刷新表格
    } else {
      layer.msg(res.msg, { icon: 2, time: 5000 });
    }
  })
}

// 监听筛选条件变化
watch([
  () => queryForm.value.city,
  () => queryForm.value.county,
  () => queryForm.value.town,
  () => queryForm.value.forestClass,
  () => queryForm.value.ecologicalZone,
], () => {
  initDataList();
})

// ==================================================================================================================
var row_hb_fq = null //记录合并的行
var row_hb_sllb = null //记录合并的行

// 单元格合并规则
const spanMethod = ref((row, column, rowIndex, columnIndex) => {
  const tableData = dataSource.value || [];

  // 处理生态分区统计 合并行
  if (columnIndex === 2) {
    if (row.ecological_zone_2.endsWith("（合计）")) {
      row_hb_fq = rowIndex;
      return [1, 9]
    }
  }
  if (rowIndex === row_hb_fq) {
    if (columnIndex > 2 && columnIndex < 11) {
      return [0, 0]
    }
    row_hb_fq = null
  }

  // 处理森林类别统计 合并行
  if (columnIndex === 3) {
    if (row.forest_class.endsWith("（合计）")) {
      row_hb_sllb = rowIndex;
      return [1, 11 - columnIndex]
    }
  }
  if (rowIndex === row_hb_sllb) {
    if (columnIndex > 3 && columnIndex < 11) {
      return [0, 0]
    }
    row_hb_sllb = null
  }

  // ==================================================================================================================

  // 市 合并列
  // 只处理特定列（这里以第一列为例，可以根据需要修改）
  if (columnIndex === 0) {
    // 如果是第一行，初始化位置记录
    if (rowIndex === 0) {
      // 可以在这里添加初始化逻辑，如果需要的话
    }
    // 检查当前行与上一行的值是否相同
    if (rowIndex > 0 && tableData[rowIndex]['city'] === tableData[rowIndex - 1]['city']) {
      // 如果相同，返回 [0, 0] 表示不显示这个单元格
      // console.log('当前行与上一行相同：', rowIndex, columnIndex, tableData[rowIndex]['city'], tableData[rowIndex - 1]['city']);
      return [0, 0];
    } else {
      let rowspan = 1; // 如果不同，计算需要合并的行数
      // 向后查找相同的值
      for (let i = rowIndex + 1; i < tableData.length; i++) {
        if (tableData[i]['city'] === row['city']) {
          rowspan++;
        } else {
          break;
        }
      }
      return [rowspan, 1]; // 返回合并的行数和列数 [rowspan, 1]
    }
  }

  if (columnIndex === 1) {
    // 如果是第一行，初始化位置记录
    if (rowIndex === 0) {
      // 可以在这里添加初始化逻辑，如果需要的话
    }
    // 检查当前行与上一行的值是否相同
    if (rowIndex > 0 && tableData[rowIndex]['county'] === tableData[rowIndex - 1]['county']) {
      return [0, 0]; // 如果相同，返回 [0, 0] 表示不显示这个单元格
    } else {
      let rowspan = 1; // 如果不同，计算需要合并的行数
      // 向后查找相同的值
      for (let i = rowIndex + 1; i < tableData.length; i++) {
        if (tableData[i]['county'] === row['county']) {
          rowspan++;
        } else {
          break;
        }
      }
      return [rowspan, 1]; // 返回合并的行数和列数 [rowspan, 1]
    }
  }


  if (columnIndex === 2) {
    // 如果是第一行，初始化位置记录
    if (rowIndex === 0) {
      // 可以在这里添加初始化逻辑，如果需要的话
    }
    // 检查当前行与上一行的值是否相同
    if (rowIndex > 0 && tableData[rowIndex]['ecological_zone_2'] === tableData[rowIndex - 1]['ecological_zone_2']) {
      return [0, 0]; // 如果相同，返回 [0, 0] 表示不显示这个单元格
    } else {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.length; i++) {
        if (tableData[i]['ecological_zone_2'] === row['ecological_zone_2']) {
          rowspan++;
        } else {
          break;
        }
      }
      return [rowspan, 1];
    }
  }


  if (columnIndex === 3) {
    // 如果是第一行，初始化位置记录
    if (rowIndex === 0) {
      // 可以在这里添加初始化逻辑，如果需要的话
    }
    // 检查当前行与上一行的值是否相同
    if (rowIndex > 0 && tableData[rowIndex]['forest_class'] === tableData[rowIndex - 1]['forest_class']) {
      return [0, 0];
    } else {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.length; i++) {
        if (tableData[i]['forest_class'] === row['forest_class']) {
          rowspan++;
        } else {
          break;
        }
      }
      return [rowspan, 1];
    }
  }

  if (columnIndex === 4) {
    // 如果是第一行，初始化位置记录
    if (rowIndex === 0) {
      // 可以在这里添加初始化逻辑，如果需要的话
    }
    // 检查当前行与上一行的值是否相同
    if (rowIndex > 0 && tableData[rowIndex]['origin'] === tableData[rowIndex - 1]['origin']) {
      return [0, 0];
    } else {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.length; i++) {
        if (tableData[i]['origin'] === row['origin']) {
          rowspan++;
        } else {
          break;
        }
      }
      return [rowspan, 1];
    }
  }
})


onMounted(() => {
  initDataList();
  getSelectList();
});

</script>

<style scoped>
::v-deep .layui-tag-input {
  height: 22px;
}
</style>